import  { type FC, cloneElement } from 'react';
import { View, Text } from 'react-native';
import Space from '../Space';
import Button from '../Button';
import NoData from '@/assets/icons/no_data.svg';
import NoChat from '@/assets/icons/no_message.svg';
import NoNotify from '@/assets/icons/no_notify.svg';
import { emptyStyles } from './styles';

export type EmptyType = 'data' | 'chat' | 'notify';

export type EmptyProps = {
  width: number;
  height: number;
  desc?: string;
  type?: EmptyType;
  btnText?: string;
  onBtnClick?: () => Promise<void>;
}

const title = 'No record in this page.';

const Empty: FC<EmptyProps> = (props) => {
  const {
    desc,
    btnText,
    onBtnClick,
    type = 'data',
    ...sizes
  } = props;

  const showBtn = !!btnText && !!onBtnClick;

  const renderIcon = () => {
    switch (type) {
      case 'data': {
        return <NoData />;
      }
      case 'chat': {
        return <NoChat />
      }
      case 'notify': {
        return <NoNotify />
      }
    }
  }

  return (
    <View style={[emptyStyles.empty, sizes]}>
      <View style={emptyStyles.content}>
        {cloneElement(renderIcon(), {
          width: 124,
          height: 124,
          color: 'rgba(0,0,0,.2)',
          style: emptyStyles.icon
        })}
        <Space
          size={16}
          direction="vertical"
          style={emptyStyles.text}
        >
          <Text style={emptyStyles.title}>{title}</Text>
          {!!desc && <Text style={emptyStyles.desc}>{desc}</Text>}
        </Space>
        {showBtn && (
          <Button
            round
            size="small"
            type="primary"
            title={btnText}
            onPress={onBtnClick}
            innerStyle={emptyStyles.button}
          />
        )}
      </View>
    </View>
  );
}

export default Empty;